<template>
    <div class="table add-goods">
        <div class="container">
            <el-container class="container-top">
                <el-header class="progress">
                    <el-steps :active="activeStep" simple>
                        <el-step title="基本信息" icon="el-icon-edit"></el-step>
                        <el-step title="图文信息" icon="el-icon-upload"></el-step>
                    </el-steps>
                </el-header>
                  <!-- <component :is="'goodsMediaInfo'" /> -->
                  <component v-if="activeStep == 0" :is="'goodsBaseInfo'" :goods-info="goodsInfo"
                             @next="nextStep" @prev="prevStep"/>
                  <component v-if="activeStep == 1" :is="'goodsMediaInfo'" :goods-info="goodsInfo"
                             @next="nextStep" @prev="prevStep" @save="saveGoodsBaseInfo"/>
                  <component v-if="activeStep == 2" :is="'goodsAdvancedInfo'" :goods-info="goodsInfo"
                             @next="nextStep" @prev="prevStep"/>

            </el-container>
        </div>
    </div>
</template>

<script>
import request from '../request.js'
import goodsBaseInfo from './components/goodsBaseInfo'
import goodsMediaInfo from './components/goodsMediaInfo.vue'
import goodsAdvancedInfo from './components/goodsAdvancedInfo.vue'

export default {
    name: "addGoods",
    data () {
        return {
            request: new request(),
            activeStep: 0,
            goodsInfo: {
                goodsSn: '',
                goodsName: '',
                categorySn: '',
                categoryName: '',
                unit: '',
                thumbUrl: '',
                marketPrice: '',
                storage: '',
                detailDesc: '',
                isMarketable: '1',
                vipPrice:''
            },
            pageType: 'add',
        }
    },
    created() {
        let query = this.$route.query
        if (query && query.goodsSn) {
            this.pageType = 'edit',
            this.fetchGoodsInfo(query.goodsSn)
        }
    },
    components: { goodsBaseInfo, goodsMediaInfo, goodsAdvancedInfo },
    methods: {
        nextStep(step) {
            this.activeStep = step
        },
        prevStep(step) {
            this.activeStep = step
        },
        fetchGoodsInfo(id) {
            this.request.fetchGoodsInfo({
                goodsSn: id
            }).then(res => {
                if (res.code == 200) {
                    this.goodsInfo = res.ext
                } else {
                    this.$message.error('获取商品信息错误: ', res.msg)
                }
            })
        },
        saveGoodsBaseInfo() {
            this.request.addGoodsBaseInfo({
                ...this.goodsInfo,
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success('保存成功')
                    this.$router.push('/goods/goodsList')
                } else {
                    this.$message.error('保存失败: ', res.msg)
                }
            })
        },
    }
}
</script>

<style scoped>
    .container-top{
        position: relative;
    }
    .progress{
        padding-top: 10px;
        width: 50%;
        margin-top: 10px;
        margin-right: 0;
        margin-left: 0;
        margin: auto
    }
    .content{

    }
</style>
